<template>
	<view class="page-my">
		<block v-for="(menuItem, index) in menuItems" :key="index">
			<category-item :param="menuItem" :key="index" >

			</category-item>
		</block>
	</view>

</template>

<script>
	import categoryItem from '@/components/ibs/categoryItem.vue';
	export default {
		components: {
			categoryItem
		},
		data() {
			return {
				menuItems: [
					{
						frontIcon: '../../static/ibs/img_personal_editor.png', // 文字前的图标
						label: '编辑资料', // 标签显示的文字
						pathUrl: '/pages/my/userInfo' // 点击后跳转的路径
					},
					{
						itemClass: ['category-item', 'margin-item'], // 样式
						frontIcon: '../../static/ibs/img_personal_buy.png', // 文字前的图标
						label: '我的求购', // 标签显示的文字
						labelClass: ['label-class'],
						infoTip: '新报价',
						pathUrl: '/pages/my/buyList' // 点击后跳转的路径
					},
					{
						frontIcon: '../../static/ibs/img_personal_quote.png', // 文字前的图标
						label: '我的报价', // 标签显示的文字
						pathUrl: '/pages/my/myQuote' // 点击后跳转的路径
					},
					{
						frontIcon: '../../static/ibs/img_personal_preview.png', // 文字前的图标
						label: '查看的求购', // 标签显示的文字
						pathUrl: '/pages/my/seeDemand' // 点击后跳转的路径
					},
					{
						frontIcon: '../../static/ibs/img_personal_notice.png', // 文字前的图标
						label: '设置', // 标签显示的文字
						pathUrl: '/pages/my/settings' // 点击后跳转的路径
					}
				]
			};
		},
		onShow() {
			console.log('may/index-----onShow： unreadquote： ' + this.$store.getters.getUnreaduote);
			this.menuItems[1].infoTip = this.$store.getters.getUnreaduote ? '新报价' : null;
			this.menuItems[1].labelClass = this.$store.getters.getUnreaduote ? ['label-class'] : null;
		}
	}
</script>

<style>
	.page-my {
		background-color: #f2f2f5;
		border-top: 1px #e5e5e5 solid;
	}
	.page-my .category-item {
		display: flex;
		height: 88upx;
		line-height: 88upx;
		vertical-align: middle;
		padding: 0 24upx;
		font-size: 28upx;
		color: #1a1a1a;
		background-color: #ffffff;
		border-bottom: 1px #e5e5e5 solid;
		align-items: center;
		justify-content: space-between;

	}

	.page-my .margin-item {
		margin-top: 20upx;
		border-top: 1px #e5e5e5 solid;
	}
	.page-my .label-class {
		flex-shrink: 0;
		padding-left: 20upx;
		text-align: left;
	}
</style>
